<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-button type="primary" size="mini" @click="addDialogVisible=true">添加</el-button>
      </el-col>
    </el-row>
    <br>
    <el-card>
      <div>
        <el-table
          ref="table"
          border
          stripe
          :data="list"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="catelogId"
            label="类别编号"
          ></el-table-column>
          <el-table-column
            prop="userId"
            label="发布者编号"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="物品名"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="价格"
          ></el-table-column>
          <el-table-column
            prop="realPrice"
            label="原价"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="发布时间"
          ></el-table-column>
          <el-table-column
            label="图片"
          >
            <template slot-scope="scope">
              <img :src="scope.row.imgUrl"  width="70" >
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="商品状态"
          >
            <template slot-scope="x">
              <p v-if="x.row.status==1" style="color: blue">正常</p>
              <p v-if="x.row.status==0" style="color: red">下架</p>
            </template>
          </el-table-column>w
          <el-table-column
            header-align="center"
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showOne(scope.row)">更新</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope.row.id)" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size.sync="pageSize"
          :page-sizes="pageSizes"
          :current-page.sync="currentPage"
          background
          @current-change="handleCurrentChange"
          layout="sizes, prev, pager, next, jumper, ->, total"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!--添加物品的对话框-->
    <el-dialog
      title="添加物品"
      :visible.sync="addDialogVisible"
      width="40%"
    >
      <el-form ref="form" :model="good" label-width="80px">
        <el-form-item label="物品名">
          <el-input v-model="good.name" placeholder="请输入物品名"></el-input>
        </el-form-item>
        <el-form-item label="所有者编号">
          <el-input v-model="good.userId" placeholder="请输入物品所有者编号"></el-input>
        </el-form-item>
        <el-form-item label="照片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8989/ZuaMarket/file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="height: 50px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="分类">
          <select v-model="good.catelogId">
            <option value="1" selected="selected">闲置数码</option>
            <option value="2">校园代步</option>
            <option value="3">电器日用</option>
            <option value="4">图书教材</option>
            <option value="5">美妆衣物</option>
            <option value="6">运动娱乐</option>
            <option value="7">票券小物</option>
          </select>
        </el-form-item>
        <el-form-item label="原价">
          <el-input v-model="good.realPrice" placeholder="请输入物品原价"></el-input>
        </el-form-item>
        <el-form-item label="现价">
          <el-input v-model="good.price" placeholder="请输入物品现价"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="good.describle" placeholder="请输入物品描述"></el-input>
        </el-form-item>
        <el-form-item>
          &nbsp;<el-button type="primary" @click="addOne">添加</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--更新物品的对话框-->
    <el-dialog
      title="更新物品"
      :visible.sync="updateDialogVisible"
      width="40%"
    >
      <el-form ref="form" :model="good" label-width="80px">
        <el-form-item label="物品名">
          <el-input v-model="good.name" placeholder="请输入物品名"></el-input>
        </el-form-item>
        <el-form-item label="所有者编号">
          <el-input v-model="good.userId" placeholder="请输入物品所有者编号"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <select v-model="good.catelogId">
            <option value="1" selected="selected">闲置数码</option>
            <option value="2">校园代步</option>
            <option value="3">电器日用</option>
            <option value="4">图书教材</option>
            <option value="5">美妆衣物</option>
            <option value="6">运动娱乐</option>
            <option value="7">票券小物</option>
          </select>
        </el-form-item>
        <el-form-item label="原价">
          <el-input v-model="good.realPrice" placeholder="请输入物品原价"></el-input>
        </el-form-item>
        <el-form-item label="现价">
          <el-input v-model="good.price" placeholder="请输入物品现价"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="good.describle" placeholder="请输入物品描述"></el-input>
        </el-form-item>
        <el-form-item>
          &nbsp;<el-button type="primary" @click="updateOne">更新</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
    export default {
        name: "Goods",
      data(){
          return{
            list:[],
            pageSize:5,
            pageSizes:[5],
            currentPage:1,
            total:1,
            addDialogVisible:false,
            updateDialogVisible:false,
            good:{},
            imageUrl:""
        }
      },
      created() {
        this.handleAClick(1);
      },
      methods:{
        handleAClick(i){
          this.axios.get("/ZuaMarket/Good/goods?pageNum="+i).then(resp => {
            let data = resp.data;
            this.list = data.list;
            this.total = data.total;
          })
        },
        handleCurrentChange(page){
          this.handleAClick(page);
        },
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          console.log(res.fileName)
          this.good.imgUrl=res.fileName
          console.log(this.good)
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        addOne(){
          console.log(this.good)
          this.axios.put("/ZuaMarket/Good/user/addGood",this.good).then(resp=>{
            let data = resp.data
            let state = data.state
            console.log(state)
            if(state=="success"){
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.addDialogVisible = false;
            }
          })
        },
        updateOne(){
          console.log(this.good)
          this.updateDialogVisible = false;
          this.axios.put("/ZuaMarket/Good/changeGood",this.good).then(resp=>{
            if(resp.data.status == "success"){
              alert("更新成功");
              this.handleAClick(this.currentPage);
            }else{
              alert("更新失败");
            }
          }).catch(err => {
            console.log(err);
          })
          this.good={};
        },
        remove(i){
          let isDelete = confirm("确定删除吗?");
          if (!isDelete) {
            return;
          }
          this.axios.delete("/ZuaMarket/Good/good/"+i).then(resp => {
            let responseData = resp.data;
            console.log(responseData);
            if (responseData.status == "success") {
              alert("删除成功");
              this.handleAClick(this.currentPage);
            } else {
              alert("删除失败");
            }
          }).catch(err => {
            console.log(err);
          })
        },
        showOne(row){
          this.good = JSON.parse(JSON.stringify(row));
          this.updateDialogVisible = true;
        },
        cancel(){
          this.good={};
          this.updateDialogVisible = false;
          this.addDialogVisible = false;
        }
      }
    }
</script>
<style scoped>
</style>
